<script setup>
import { computed, reactive } from "vue";
import useTaskStore from "@/pinia/modules/taskStore";

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  planDepartureTime: {
    type: String,
    required: true,
  },
});

const taskStore = useTaskStore();

/*表单数据对象*/
const formData = reactive({
  id: props.id,
  delayTime: "",
  delayReason: "",
});

/*时间选择器的change事件*/
const changePicker = ({ detail }) => {
  const [date] = props.planDepartureTime.split(" ");
  formData.delayTime = `${date} ${detail.value}`;
};

/*提交按钮的回调函数*/
const submit = async () => {
  try {
    await taskStore.delayTask(formData);
    await uni.reLaunch({ url: "/pages/task/index" });
    uni.showToast({ title: "延迟提货成功", duration: 2000, icon: "success" });
  } catch (error) {
    await uni.showToast({ title: error.message, duration: 2000, icon: "error" });
  }
};

</script>

<template>
  <view class="page-container">
    <uni-list :border="false">
      <uni-list-item title="原定时间 " showArrow :rightText="planDepartureTime" />
      <uni-list-item title="延迟时间" showArrow>
        <template v-slot:footer>
          <picker class="time-picker" mode="time" @change="changePicker">
            <text v-if="!formData. delayTime">不可超过2个小时</text>
            <text v-else>{{ formData.delayTime }}:00</text>
          </picker>
        </template>
      </uni-list-item>
      <uni-list-item direction="column">
        <template v-slot:body>
          <view class="textarea-wrapper">
            <textarea class="textarea" placeholder-style="color: #818181" placeholder="请输入延迟提货原因" v-model="formData.delayReason"></textarea>
            <text class="words-count">{{ formData.delayReason.length}}/50</text>
          </view>
        </template>
      </uni-list-item>
      <uni-list-item :border="false">
        <template v-slot:body>
          <button class="button" @tap="submit">提交</button>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>
